<template>
	<view class="aboutorder">
		<!-- 头部 -->
		<view class="aboutorder_head">
			<view v-for="(item,index) in headlist" :key="index" class="reflect_headbox" @click="Onhead(item)">
				<view class="head_box">
					<text :class="item.show?'head_titlea':'head_titleb'" class="head_title">{{item.title}}</text>
					<view class="reflect_border" v-if="item.show">
						<view></view>
					</view>
				</view>
				<!-- 头部2级 -->
				<view class="aboutorder_two" v-if="item.show">
					<view v-for="(item1,index1) in item.list" :key="index1" class="reflect_twobox"
						@click.stop="Ontwohead(item1)">
						<text :class="item1.show?'head_twotitlea':'head_twotitleb'">{{item1.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据 -->
		<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="170" :initData="initData" @dataRefresh='dataRefresh'
			v-if="LoadIf">
			<text></text>
			<view v-for="(item,index) in MessageList" :key="index" class="message_list">
				<view class="cleaning_is">
					<view class="cleaning_isbox">
						<view class="font14 font-323232 font-b">订单号:{{item.order_code}}</view>
						<view class="font14 font-969696">
							{{item.status == 'normal'?'等待接诊':item.status == 'refund'?'已退款':item.status == 'refuse_patient'?'拒绝接诊':item.status == 'patient'?'接诊中':'接诊完成'}}
						</view>
					</view>
					<text class="font13 font-969696">下单时间:{{item.createtime}}</text>
				</view>
				<view class="cleaning_bos cleaning">
					<image class="cleaning_image" mode="aspectFill" :src="http_img+item.doctor_img"></image>
					<view class="cleaning_box">
						<view class="font14 font-323232">{{item.doctor_name}}</view>
						<view class="font14 font-323232">{{item.academic_title_name}}</view>
						<view class="ellipsis font13 font-969696">问题描述:{{item.content?item.content:'暂无'}}</view>
					</view>
				</view>
				<view class="cleaning_onall">
					<view class="font-323232 cleaning_money">
						<text class="font11">订单金额 ￥</text>
						<text class="font14 font-b">{{item.money}}</text>
					</view>
					<view class="cleaning_button">
						<!-- <view v-if="item.status =='normal'" @click.stop="Onrefundorder(item)">取消订单</view> -->
						<view @click.stop="Onjump(item)">进入聊天室</view>
						<!-- <view v-if="item.status =='end'" @click.stop="Onevaluate(item)">去评价</view> -->
						<view v-if="(item.status =='end'||item.status =='comment')&& headindex =='tw'" @click.stop="Onjump(item)">问诊记录</view>
						<view @click.stop="Onpages(item)">订单详情</view>
						<!-- <view v-if="item.status =='comment'">已评论</view> -->
					</view>
				</view>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import LoadMore from "@/components/loadMore.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				LoadIf: false, //先不加载
				http_img: this.$store.state.http_img, //图片地址
				//传参数据
				initData: {
					url: 'paymentConsultationOrder', //接口
					//data里得传参
					param: {
						type: 'normal',
					},
				},
				headindex: 'tw', //下标显示1级
				headindex1: 'ing', //下标显示2级
				//头部数据
				headlist: [{
						title: '图文问诊',
						id: 'tw',
						show: true,
						url: 'paymentConsultationOrder',
						list: [{
								title: '进行中的咨询信息',
								id: 'ing',
								show: true
							},
							{
								title: '已完成的咨询信息',
								id: 'end',
								show: false
							}
						]
					},
					{
						title: '视频问诊',
						id: 'store',
						show: false,
						url: 'paymentConsultationVideoOrder',
						list: [{
								title: '进行中的咨询信息',
								id: 'ing',
								show: true
							},
							{
								title: '已完成的咨询信息',
								id: 'end',
								show: false
							}
						]
					}
				],
				//数据
				MessageList: []
			}
		},
		onLoad: function(options) {
			if (options.code1) {
				this.headlist.forEach(item => {
					item.show = false
					if (item.id == options.code1) {
						item.show = true
						item.list.forEach(item1 => {
							item1.show = false
							if (item1.id == options.code2) {
								item1.show = true
								this.initData.url = item.url
								this.initData.param = {
									type: options.code2=='ing'?'normal':'end'
								}
								this.MessageList = []
								this.LoadIf = true
							}
						})
					}
				})
			} else {
				this.LoadIf = true
			}
		},
		methods: {
			//返回数据
			dataRefresh(e) {
				e.forEach(item => {
					item.createtime = this.$base.formatTime(new Date(item.createtime *
						1000), "yyyy/MM/dd hh:mm:ss")
				})
				this.MessageList = e
			},
			//点击一级切换
			Onhead(res) {
				let initData = {}
				this.headlist.forEach(item => {
					item.show = false
					item.list.forEach(item1 => {
						item1.show = false
					})
					if (item.id == res.id) {
						item.show = true
						item.list[0].show = true
					}
				})
				this.headindex = res.id
				this.headindex1 = 'ing'
				if (res.id == 'tw') {
					this.initData.url = 'paymentConsultationOrder'
					this.initData.param = {
						type: 'normal',
					}
					this.$refs.LoadMore.oncutRefresh(this.initData)
				}
				if (res.id == 'store') {
					this.initData.url = 'paymentConsultationVideoOrder'
					this.initData.param = {
						type: 'normal'
					}
					this.$refs.LoadMore.oncutRefresh(this.initData)
				}
			},
			//点击二级切换
			Ontwohead(res) {
				this.headlist.forEach(item => {
					if (item.show) {
						this.headindex = item.id
						item.list.forEach(item1 => {
							item1.show = false
							if (item1.id == res.id) {
								item1.show = true
								this.headindex1 = item1.id
								if (res.id == 'end') {
									this.initData.param = {
										type: 'end'
									}
								}
								if (res.id == 'ing') {
									this.initData.param = {
										type: 'normal'
									}
								}
							}
						})
					}
				})
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			//取消订单
			Onrefundorder(e) {
				let that = this
				//图文取消
				if (this.headindex == 'tw') {
					uni.showModal({
						title: '操作提示',
						confirmText: '确定',
						confirmColor: '#6bcbb6',
						cancelText: '取消',
						content: '您确定要取消问诊吗',
						success: function(res) {
							if (res.confirm) {
								that.$Http({
									url: 'refundConsultationOrder',
									data: {
										order_code: e.order_code,
									},
									show: true,
									type: 'post'
								}).then(res => {
									if (res.code == 1) {
										//订单详情
										that.$refs.LoadMore.oncutRefresh(that.initData)
									}
								})
							}

						}
					});
				}
				//视频取消
				if (this.headindex == 'store') {
					uni.showModal({
						title: '操作提示',
						confirmText: '确定',
						confirmColor: '#6bcbb6',
						cancelText: '取消',
						content: '您确定要取消问诊吗',
						success: function(res) {
							if (res.confirm) {
								that.$Http({
									url: 'refundConsultationVideoOrder',
									data: {
										order_id: e.order_code,
									},
									show: true,
									type: 'post'
								}).then(res => {
									if (res.code == 1) {
										//订单详情
										that.$refs.LoadMore.oncutRefresh(that.initData)
									}
								})
							}

						}
					});
				}
			},
			//评价页面
			Onevaluate(e) {
				if (e.status == 'end') {
					uni.navigateTo({
						url: '/pagesA/common/evaluate?id=' + e.id + '&type=' + this.headindex,
					})
				}
			},
			//订单详情
			Onpages(e){
				uni.navigateTo({
					url: '/pagesA/my/seedinfo?id=' + e.order_code + '&type=' + this.headindex,
				})
			},
			Onjump(e) {
				if (this.headindex == 'tw') {
					uni.navigateTo({
						// url: '/pagesA/message/patient?status=' + e.status + '&order_id=' + e.id + '&orderNo=' + e.order_code + '&userId=' + e.doctor_user_id + '&userName=' + e.doctor_name + '&userFace=http://cdn.yingpaipay.com' + e.doctor_img,
						url: '/pagesA/message/chat?isDoc=0&cate=text&orderno='+e.order_code
					})
				}
				if (this.headindex == 'store') {
					uni.navigateTo({
						// url: '/pagesA/common/video?id=' + e.id + '&type=user',
						url: '/pagesA/message/chat?isDoc=0&cate=video&orderno='+e.order_code
					})
				}

			}
		}
	}
</script>

<style>
	/* 头部 */
	.aboutorder_head {
		height: 170rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.reflect_headbox {
		height: 200rpx;
	}

	.head_box {
		height: 100rpx;
	}

	.head_title {
		height: 74rpx;
		line-height: 74rpx;
		font-size: 30rpx;
	}

	.head_titlea {
		font-weight: 700;
		color: #323232;
	}

	.head_titleb {
		color: #969696;
	}

	.reflect_border {
		height: 26rpx;
	}

	.reflect_border view {
		height: 5rpx;
		background-color: #6bcbb6;
		border-radius: 3px;
	}

	/* 二级 */
	.aboutorder_two {
		width: 750rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 26rpx;
	}

	.head_twotitlea {
		color: #6bcbb6;
	}

	.head_twotitleb {
		color: #969696;
	}

	/* 数据 */
	.message_list {
		width: 690rpx;
		background-color: #ffffff;
		box-shadow: 0px 3rpx 30rpx 0px rgba(168, 168, 168, 0.15);
		border-radius: 5rpx;
		margin: 0rpx 30rpx 50rpx 30rpx;
		padding: 28rpx 24rpx;
	}

	/* 数据 */
	.cleaning_isbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.cleaning {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cleaning_bos {
		padding: 30rpx 0 40rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.cleaning_image {
		width: 132rpx;
		height: 132rpx;
		border: 66rpx;
		border-radius: 10rpx;
	}

	.cleaning_box {
		width: 500rpx;
		height: 132rpx;
		padding-left: 27rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cleaning_info {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cleaning_money {
		display: flex;
		align-items: baseline;
	}

	.cleaning_onall {
		height: 66rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.cleaning_button {
		display: flex;
	}

	.cleaning_button view {
		height: 45rpx;
		border-radius: 23rpx;
		border: solid 1rpx #6bcbb6;
		padding: 0 16rpx;
		font-size: 26rpx;
		color: #6bcbb6;
		line-height: 45rpx;
		margin-left: 30rpx;
	}

	.cleaning_sale {
		height: 45rpx;
		border-radius: 23rpx;
		padding: 0 16rpx;
		font-size: 26rpx;
		color: #969696;
		line-height: 45rpx;
		margin-left: 30rpx;
	}
</style>
